<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	    <link rel="stylesheet" href="homepage/css/font-awesome.min.css">
	    <link rel="stylesheet" href="homepage/css/bootstrap.min.css">
	    <link rel="stylesheet" href="homepage/css/index.css">
	    <script src="homepage/js/jquery.min.js"></script>
	    <script src="homepage/js/bootstrap.min.js"></script>
	    <script src="homepage/js/index.js"></script>
	    <title>主页</title>
</head>
<body>
<header id="header">
    <nav id="top-nav">
        <div class="city">
            太原&nbsp;&nbsp;<small>更换</small>
        </div>
        <div class="login">
            <ul>
                <li><a data-toggle="modal" href="#myModal">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">帮助中心</a></li>
            </ul>
        </div>
    </nav>
    <div class="logo">
        <div class="content">
            <div class="left">
                <img src="homepage/img/logo.png" alt="logo" width="240px" height="90px"/>
            </div>
            <div class="right">
                <img src="homepage/img/ad.png" alt="广告" width="555px" height="89px"/>
            </div>
        </div>
    </div>
    <nav id="nav">
        <ul class="menu">
            <li class="active"><a href="#">电影首页</a></li>
            <li><a href="#">电影排期</a></li>
            <li><a href="#">移动购票</a></li>
            <li><a href="#">电影谈资</a></li>
            <li class="special"><a href="#"><i class="icon-bullhorn" style="font-size: 23px;color: #F9C221;"></i>&nbsp;&nbsp;活动促销</a></li>
        </ul>
    </nav>
    
</header>

<!--中间部分-->
<section id="main">
    <div class="main-left">
        <!--轮播-->
        <div id="myCarousel" class="carousel slide">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="homepage/img/pic1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="homepage/img/pic2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="homepage/img/pic3.png" alt="Third slide">
                </div>
            </div>
            <div class="close m-close">&times;</div>
        </div>
        <!--标签页-->

        <ul class="tabs">
            <li class=" active" data-to="sub1">正在热映</li>
            <li data-to="sub2">即将上映</li>
            <li data-to="sub3">观影月历</li>
        </ul>
        <div class="tab-content">
            <div class="sub sub1 active">
            	<c:forEach items="${indexFilmList}" var="item">
	                <dl>
	                    <dt>
	                        <img src="assets/img/${item.filmPicture}" alt="${item.filmName}"
	                        width="174px" height="232px" border="0" vspace="0" />
	                        <div class=" img-hover ">
	                            <span class="kind">IMAX-3D</span>
	                            <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
	                            <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
	                            <span class="describe">符号博士再度拯救人类</span>
	                        </div>
	                    </dt>
	                    <dd class="title"><a href="#">但丁密码</a></dd>
	                </dl>
                </c:forEach>
                <!-- <dl>
                    <dt>
                        <img src="homepage/img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie4.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">斯坦森为爱重返杀场</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">机械师2：复活</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie1.jpg" alt=""/>
                    <div class="img-hover">
                        <span class="kind">IMAX-3D</span>
                        <a href="#" class="detail"><i class="icon-film" title="影片详情"></i></a>
                        <a href="#" class="buy"><i class="icon-shopping-cart" title="去购票"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl> -->
                
            </div>
            <div class="sub sub2">
                <dl>
                    <dt>
                        <img src="homepage/img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月2日</span></dd>

                </dl>
                <dl>
                    <dt>
                        <img src="homepage/img/movie3.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-film" title="影片详情"></i></a>
                        <span class="describe">展现盲人的故事和信仰</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">我的圣徒</a> <span class="date" title="上映日期"><i class="icon-calendar"></i>11月3日</span></dd>

                </dl>
            </div>
            <div class="sub sub3">
                <dl>
                    <dt>
                        <img src="homepage/img/movie2.jpg" alt=""/>
                    <div class="img-hover">
                        <a href="#" class="detail-special"><i class="icon-eye-open" title="影片详情"></i></a>
                        <span class="describe">符号博士再度拯救人类</span>
                    </div>
                    </dt>
                    <dd class="title"><a href="#">但丁密码</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="main-right">
        <div class="notice">
            <div class="notice-title">
                最新公告
            </div>
            <div class="arrow"></div>
            <div class="notice-body">
                <a href="#">关于停用邮箱账afafafdafad号登录sdfafafafdafafafa通知</a>
                <a href="#">万达影城儿童观影购票指南</a>
                <a href="#">关于《万达电影》杂志停刊通知</a>
                <a href="#">关于停用邮箱账号登录通知</a>
            </div>
        </div>
    </div>
</section>

<!--脚-->
<footer id="footer">
    <div class="other">
        <div class="other-content">
            <div class="other-left">
                <a href="#">联系我们</a>
                <a href="#">电影情报</a>
                <a href="#">友情链接</a>
            </div>
            <div class="other-right">
                <a href="#">万达集团</a>
                <a href="#">万达院线官网</a>
            </div>
        </div>
    </div>
    <div class="info">
        <p>Copyright © 2011-2013 Wandafilm.com ALL rights reserved&nbsp;&nbsp;&nbsp;&nbsp;冀ICP备13013593&nbsp;&nbsp;&nbsp;&nbsp;增值电信业务经营许可证B2-20130186 </p>
    </div>
</footer>
</body>
</html>